<template>
  <div>
    <li>
      <label>
        <input type="checkbox" v-model="isDone"/>
        <span>{{todo.content}}</span>
      </label>
      <button class="btn btn-danger" @click="delTodoHandle">删除</button>
    </li>
  
  
  </div>
</template>

<script>
  export default {
    name: "TodoItem",
    props: ['todo', 'delOneTodo', 'isSelect'],
    data() {
      return {
        isShow: true
      }
    },
    methods: {
      delTodoHandle() {
        if (confirm(`您确定要删除'${this.todo.content}'这条评论吗?`)) {
          this.delOneTodo(this.todo.id)
        }
      }
    },
    computed:{
      isDone:{
        get() {
          return this.todo.isDone
        },
        set() {
        this.isSelect(this.todo.id)
        }
      }
    }
  }
</script>

<style scoped>
  /*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }
  
  li:hover {
    background: #ccc;
  }
  
  .btn.btn-danger {
    display: none;
  }
  
  li:hover .btn.btn-danger {
    display: block;
  }
  
  li label {
    float: left;
    cursor: pointer;
  }
  
  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  
  li button {
    float: right;
    display: none;
    margin-top: 3px;
  }
  
  li:before {
    content: initial;
  }
  
  li:last-child {
    border-bottom: none;
  }

</style>